<template>
  <div class="gi_table_page">
    <GiTable title="盘点任务管理" row-key="id" :data="dataList" :columns="columns" :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }" :pagination="pagination" :disabled-tools="['size']"
      :disabled-column-keys="['name']" @refresh="search">
      <template #toolbar-left>
        <a-input-search v-model="queryForm.name" placeholder="请输入任务名称" allow-clear @search="search" />
        <a-button @click="reset">
          <template #icon><icon-refresh /></template>
          <template #default>重置</template>
        </a-button>
      </template>
      <template #toolbar-right>
        <a-button v-permission="['asset:check:task:create']" type="primary" @click="onAdd">
          <template #icon><icon-plus /></template>
          <template #default>新增</template>
        </a-button>
      </template>
      <template #type="{ record }">
        <a-tag v-if="record.type == 0" color="green">设备</a-tag>
        <a-tag v-if="record.type == 1" color="orange">配件</a-tag>
        <a-tag v-if="record.type == 2" color="purple">软件</a-tag>
      </template>
      <template #status="{ record }">
        <a-tag v-if="record.status == 0" color="green">进行中</a-tag>
        <a-tag v-if="record.status == 1" color="red">中止</a-tag>
        <a-tag v-if="record.status == 2" color="purple">已完成</a-tag>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['asset:check:task:get']" title="显示盘点" @click="onItems(record)">显示盘点</a-link>
          <a-link v-if="record.status == 0 " v-permission="['asset:check:task:cancel']" title="取消盘点"
            @click="onCancel(record)">取消盘点</a-link>
        </a-space>
      </template>
    </GiTable>


    <CheckTaskAddModal ref="CheckTaskAddModalRef" @save-success="search" />
    <CheckItemsModal ref="CheckItemsModalRef" />
  </div>
</template>

<script setup lang="ts">
  import type { TableInstance } from '@arco-design/web-vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import CheckTaskAddModal from './CheckTaskAddModal.vue'
  import CheckItemsModal from './CheckItemsModal.vue'
  import { type CheckTaskResp, type CheckTaskQuery, deleteCheckTask, exportCheckTask, listCheckTask, checkTaskCancel } from '@/apis/asset/check/task'
  import { useTable } from '@/hooks'
  import { useDict } from '@/hooks/app'
  import { isMobile } from '@/utils'
  import has from '@/utils/has'

  defineOptions({ name: 'CheckTask' })

  const queryForm = reactive < CheckTaskQuery > ({
    fuzzy: undefined,
    sort: ['id,desc']
  })

  const {
    tableData: dataList,
    loading,
    pagination,
    search,
  } = useTable((page) => listCheckTask({ ...queryForm, ...page }), { immediate: true })
  const columns: TableInstance['columns'] = [
    { title: '任务名称', dataIndex: 'name', slotName: 'name', width: 220 },
    { title: '项目', dataIndex: 'type', slotName: 'type', width: 100 },
    { title: '开始日期', dataIndex: 'startDate', slotName: 'startDate' },
    { title: '结束日期', dataIndex: 'endDate', slotName: 'endDate' },
    { title: '责任人', dataIndex: 'nickname', slotName: 'nickname' },
    { title: '状态', dataIndex: 'status', slotName: 'status', width: 100 },
    { title: '盘点总数', dataIndex: 'totalItems', slotName: 'totalItems' },
    { title: '正常', dataIndex: 'checked', slotName: 'checked' },
    { title: '盘亏', dataIndex: 'notFound', slotName: 'notFound' },
    { title: '未盘', dataIndex: 'notChecked', slotName: 'notChecked' },
    {
      title: '操作',
      dataIndex: 'action',
      slotName: 'action',
      width: 180,
      align: 'center',
      fixed: !isMobile() ? 'right' : undefined,
      show: has.hasPermOr(['asset:check:task:get', 'asset:check:task:cancel'])
    }
  ]

  // 重置
  const reset = () => {
    queryForm.name = undefined
    search()
  }

  const CheckTaskAddModalRef = ref < InstanceType < typeof CheckTaskAddModal >> ()
  // 新增
  const onAdd = () => {
    CheckTaskAddModalRef.value?.onAdd()
  }

  // 修改
  const onUpdate = (record: CheckTaskResp) => {
    CheckTaskAddModalRef.value?.onUpdate(record.id)
  }

  // 显示盘点
  const CheckItemsModalRef = ref < InstanceType < typeof CheckItemsModal >> ()
  const onItems = (record: CheckTaskResp) => {
    CheckItemsModalRef.value?.onOpen(record.id)
  }

  // 取消盘点
  const onCancel = (record: CheckTaskResp) => {
    const cancel = async () => {
      try {
        const res = await checkTaskCancel(record.id)
        if (res.success) {
          Message.success('取消成功')
          search()
        }
        return res.success
      } catch (error) {
        return false
      }
    }
    Modal.warning({
      title: '提示',
      content: '是否确定取消该次盘点任务？',
      okButtonProps: { status: 'danger' },
      hideCancel: false,
      maskClosable: false,
      onBeforeOk: cancel,
    })
  }

</script>

<style scoped lang="scss"></style>